<template>
  <!-- 值守时长统计 -->
  <div class="DutyHoursStatisticstrly">
    <div class="DutyHoursStatistictop-content-view">
      <div class="page-item-title" style="height: fit-content">{{currentTypeName}}统计</div>
      <ul class="DutyHoursStatisticbarLegend">
        <li @click="alertsTimeclick()" :class="{ 'active0': 1 == showactive }">
          <span>按报警时长</span>
        </li>
        <li @click="HitTimeclick()" :class="{ 'active1': 2 == showactive }">
          <span>按报警次数</span>
        </li>
        <li @click="IdentificationTimeclick()" :class="{ 'active2': 3 == showactive }">
          <span>按正常时长</span>
        </li>
      </ul>
    </div>
    <!-- 图表 -->
    <div class="DutyHoursStatisticechart-waper">
      <!-- 模拟量图表 -->
      <div id="DutyHoursStatistictimeBar"></div>
      <div v-if="echartsData.length == 0?false:true" class="DutyTopTen">设备统计Top 10
        <ul class="DutyTopTenList">
        <li v-for="(item, index) in echartsData.slice(0,10)" :key="index">
          <div class="DutyTopTenList_li">
            <div class="DutyTopTenList_li_leftNumber">{{index+1}}</div>
            <div class="DutyTopTenList_li_rightContent" @click="skipPush(item)">
              <div>
                <div>{{item.deviceIName}}</div>
                <div style="font-size:14px;">{{item.address||''}}</div>
              </div>
              <div v-if="showactive == 1">{{item.total || '0秒'}}</div>
              <div v-else-if="showactive == 2">{{item.total}}次</div>
              <div v-else-if="showactive == 3">{{item.total || '0秒'}}</div>
              <span class="arrow-right"></span>
            </div>
          </div>
        </li>
      </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getAIAlartTimeDevice } from "@/api/record";
import Cookies from 'js-cookie'
let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
export default {
  name: "DutyHoursStatistic",
  props: ['currentTypeName'],
  data() {
    return {
      TopTen_left_Time: 0, //报警时长或次数
      echartsData: [],// 数据
      showactive: 1,  // 默认选择报警时长
      domStyle: {
        width: "440px",
        height: "375px"
      },
      AlartType: 1,
      CountType: 1,
      parame: {},
     };
  },
  created() {},
  methods: {
    // 大屏跳转到web端
    skipPush(item){
      let _this = this
      let name = Cookies.get('userName')
      let loginId1 = localStorage.getItem('ilinkBs_platformCode')
      // 接大屏的方法  ---》将大屏的参数传递给pc端实现搜索功能
      _this.$Ctl.openPopup("largeScreen", "", {
        startTime:_this.parame.startTime,
        endTime:_this.parame.endTime,
        orgIds:_this.parame.orgIds,
        searchConetent:item.deviceIName,
        isClient:"true",
        getName:name,
        loginId:loginId1
      });
    },
    // 按报警时长
    alertsTimeclick() {
      let that = this;
      that.showactive = 1;
      this.AlartType = 1;
      this.CountType = 1;
      that.getData(that.parame);
    },
    // 按报警次数
    HitTimeclick() {
      let that = this;
      that.showactive = 2;
      this.AlartType = 1;
      this.CountType = 2;
      that.getData(that.parame);
    },
    // 按正常时长
    IdentificationTimeclick() {
      let that = this;
      that.showactive = 3;
      this.AlartType = 0;
      this.CountType = 1;
      that.getData(that.parame);
    },
    /**
     * echarts-json数据
     *
     * AlartType: 0统计正常（有人） 1统计报警（无人）
     * countType: 1按时长 2按次数
     * return: data
     *  */
    getData(parames) {
      let that = this;
      that.parame = parames;
      that.echartsData = [];
      getAIAlartTimeDevice({
        orgIds: parames.orgIds,
        startTime: parames.startTime,
        endTime: parames.endTime,
        alarmType: parames.alarmType,
        alartType: that.AlartType,
        countType: that.CountType,
        topN: 20
      }).then(res => {
        if (res.status == 200) {
          that.echartsData = res.data;
          that.getEchartsData();
        }
      });
    },
    //echart--init
    getEchartsData() {
      let that = this;
      that.$nextTick(() => {
        that.initEchart();
      });
    },
    // 初始化图标
    initEchart() {
      let colorArr = [
        "rgba(46, 108, 30, 1)",
        "rgba(64, 124, 50, 1)",
        "rgba(100, 159, 89, 1)",
        "rgba(176, 118, 72, 1)",
        "rgba(177, 80, 74, 1)",
        "rgba(161, 73, 68, 1)",'#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3','#2f4554', '#61a0a8', '#d48265'
      ];
      let that = this;
      const countArr = []
      let $dom = document.getElementById("DutyHoursStatistictimeBar");
      $dom.style.width = that.domStyle.width;
      $dom.style.height = that.domStyle.height;

      that.echartsData.forEach(item => {
          countArr.push({
            value:item.duration,
            name:item.deviceIName,
            total:item.total
          })
      });
      if ($dom) {
        let option = {
          tooltip: {
            trigger: "item",
            formatter(params){
              const data = params.data
              params.percent
              return  `${params.data.name}<br/>${params.data.total}${that.showactive ==2?'次':''}（${params.percent}%）`
            }
          },
          series: [
            {
              startAngle: 45,
              type: "pie",
              radius: ["10%", "70%"],
              center: ["50%", "55%"],
              data: countArr.sort((a, b) => {return a.value - b.value;}),
              roseType: "radius",
              label: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorArr[params.dataIndex] || colorArr[0];
                  }
                }
              },
              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function(idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        that.myChart = Echarts.init($dom);
        that.myChart.setOption(option);
      }
    }
  }
};
</script>

<style lang="scss" scope>
.DutyHoursStatisticstrly {
  .DutyHoursStatistictop-content-view {
    position: relative;
    display: flex;
    align-items: center;
    .DutyHoursStatisticbarLegend {
      position: absolute;
      display: flex;
      right: 0;
      li {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 138px;
        height: 32px;
        border-radius: 4px;
        font-size: 18px;
        background: rgba(70, 153, 255, 0.1);
        color: rgba(86, 167, 217, 1);
        margin-left: 12px;
        &.active0 {
          background: rgba(67, 154, 255, 0.3);
          color: rgba(96, 194, 255, 1);
        }
        &.active1 {
          background: rgba(67, 154, 255, 0.3);
          color: rgba(96, 194, 255, 1);
        }
        &.active2 {
          background: rgba(67, 154, 255, 0.3);
          color: rgba(96, 194, 255, 1);
        }
      }
    }
  }
  .DutyHoursStatisticechart-waper {
    width: 100%;
    height: calc(100% - 20px);
    display: flex;
    .DutyTopTen {
      width: calc(100% - 440px);
      color: rgba(163, 190, 221, 1);
      font-size: 24px;
      margin-top: 40px;
      .DutyTopTenList {
        margin-top: 37px;
        font-size: 16px;
        color: white;
        height: 250px;
        overflow: auto;
        li {
          margin-bottom: 27px;
          .DutyTopTenList_li {
            display: flex;
            align-items: center;
            .DutyTopTenList_li_leftNumber {
              margin-right: 15px;
              background-color: rgba(77, 133, 223, 1);
              width: 22px;
              height: 22px;
              border-radius: 11px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
            }
            .DutyTopTenList_li_rightContent {
              display: flex;
              justify-content: space-between;
              width: 76%;
              align-items: center;
              align-content: center;
            }
            .arrow-right {
                display: inline-block;
                width: 14px;
                height: 14px;
                border-top: 2px solid #ffffff;
                border-right: 2px solid #ffffff;
                transform: rotate(45deg);
            }
          }
          .DutyTopTenList_li:hover{
            cursor: pointer;
            .DutyTopTenList_li_rightContent{
              color: rgba(77, 133, 223, 1);
            }
          }
        }
      }
    }
  }
}
</style>